<template>
  <div id="app">
    <main>
      <div class="sort">
        <input type="text" v-model="searchValue" />
        <select name="" id="" v-model="selectSort">
          <option value="a">默认排序</option>
          <option value="b">按照价格升序</option>
          <option value="c">按照价格降序</option>
        </select>
      </div>
      <div class="content" ref="wrapper">
        <div>
          <ul>
            <li v-for="v in searchList" :key="v.id">
              <dl>
                <dt><img :src="v.url" alt="" /></dt>
                <dd>
                  <p>{{ v.title }}</p>
                  <p>{{ v.desc }}</p>
                  <p
                    :style="{
                      color: v.isZan ? 'red' : '#ccc',
                      fontSize: '30px'
                    }"
                    @click="v.isZan = !v.isZan"
                  >
                    ♥ --
                    <b style="color:red">{{ v.price }}</b>
                  </p>
                </dd>
              </dl>
            </li>
          </ul>
          <p v-if="!isLoad">上拉加载...</p>
          <p v-else>数据加载中</p>
        </div>
      </div>
    </main>
    <footer></footer>
  </div>
</template>

<script>
import axios from "axios";
import BScroll from "@better-scroll/core";
import ObserveDOM from "@better-scroll/observe-dom";
import Pullup from "@better-scroll/pull-up";

BScroll.use(Pullup);
BScroll.use(ObserveDOM);
export default {
  data() {
    return {
      // 分页
      page: {
        pageSize: 10,
        pageIndex: 0
      },
      // 大数据
      list: [],

      // 实例
      bs: null,
      // 是否加载
      isLoad: false,
      // 搜索的数据
      searchValue: "",
      // 排序
      selectSort: "a"
    };
  },
  computed: {
    searchList() {
      return this.sortList.filter(item => {
        return (
          item.title.includes(this.searchValue) ||
          item.desc.includes(this.searchValue)
        );
      });
    },
    // 排序数据
    sortList() {
      // 
      if(this.selectSort === "a") {
        return [...this.list]
      } else if(this.selectSort === "b") {
        return [...this.list].sort((a,b) => {
          return a.price - b.price
        })
      } else {
        return  [...this.list].sort((a,b) => {
          return b.price - a.price
        })
      }
    }
  },
  methods: {
    // 加载数据函数
    async getList() {
      const resp = await axios.get("api/list", {
        params: this.page
      });

      this.list = this.list.concat(resp.data.data);
      console.log(this.list);
    },
    // 初始化bs
    initBS() {
      this.bs = new BScroll(this.$refs.wrapper, {
        observeDOM: true, // 开启 observe-dom 插件
        pullUpLoad: true, //开启上拉加载
        click: true
      });

      this.bs.on("pullingUp", this.pullingUpHandler);
    },
    // bs 滑动到最后 自动调用表
    async pullingUpHandler() {
      this.isLoad = true;
      this.page.pageIndex++;
      await this.getList();
      // 本次加载加载结束
      this.bs.finishPullUp();
      this.isLoad = false;
    }
  },
  mounted() {
    this.getList();
    this.initBS();
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}

dl {
  display: flex;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  overflow: hidden;
  height: 100%;
}

.content {
  height: 100%;
  overflow: hidden;
}
</style>